const jsonContent = {
  type: "document",
  children: [
    {
      type: "paragraph",
      children: [
        {
          type: "text",
          content: "Hello,",
        },
        {
          type: "text",
          content: " world!",
          styles: {
            bold: true,
            italic: true,
            underline: true,
            color: "blue",
            backgroundColor: "yellow",
          },
        },
      ],
    },
    {
      type: "code",
      children: [
        {
          type: "text",
          content: "console.log('Hello, world!');",
        },
      ],
    },
  ],
};

type TextStyle = {
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  color?: string;
  backgroundColor?: string;
};

type ASTNode = {
  type: string;
  children?: ASTNode[];
  content?: string;
  styles?: TextStyle;
  data?: any;
};

function parseHTML(html: string) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  // 获取所有节点
  const node = doc.body.childNodes;

  function parseNode(node: Node) {
    // 文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      return {
        type: "text",
        content: node.textContent || "",
      };
    }

    // 元素节点
    if (node.nodeType === Node.ELEMENT_NODE) {
      const element = node as Element;
      const blockType = element.getAttribute("data-block-type");
      switch (blockType) {
        case "paragraph":
          return {
            type: "paragraph",
            content: element.textContent || "",
          };
        case "code":
          return {
            type: "code",
            content: element.textContent || "",
          };
        default:
          break;
      }
    }
  }

  return Array.from(node).map(parseNode);
}

export function Editor() {
  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    const html = event.currentTarget.innerHTML;
    const ast = parseHTML(html);
    console.log("~~~AST~~~~", ast);
  };
  const renderHTML = (content: ASTNode[]) => {
    return content.map((node, index) => {
      switch (node.type) {
        case "paragraph":
          return (
            <div
              key={index}
              className="block docx-paragraph-block"
              data-block-type={node.type}
            >
              <p>
                {node.children?.map((child, childIndex) => {
                  if (child.type === "text") {
                    return (
                      <span
                        key={childIndex}
                        style={{
                          fontWeight: child.styles?.bold ? "bold" : "normal",
                          fontStyle: child.styles?.italic ? "italic" : "normal",
                          textDecoration: child.styles?.underline
                            ? "underline"
                            : "none",
                          color: child.styles?.color || "black",
                          backgroundColor:
                            child.styles?.backgroundColor || "transparent",
                        }}
                      >
                        {child.content}
                      </span>
                    );
                  }
                  return null;
                })}
              </p>
            </div>
          );
        case "code":
          return (
            <div
              key={index}
              className="block docx-code-block"
              data-block-type={node.type}
            >
              <pre>
                {node.children?.map((childNode) => childNode.content).join("")}
              </pre>
            </div>
          );
      }
    });
  };
  return (
    <div
      suppressContentEditableWarning={true}
      contentEditable
      onKeyDown={handleKeyDown}
    >
      {renderHTML(jsonContent.children)}
    </div>
  );
}
